<!DOCTYPE html>
<!-- 声明文档使用 HTML5 标准 -->
<html lang="zh-CN">
    <!-- 设置页面语言为中文 -->

<head>
    <!-- 页面元数据部分 -->
    <meta charset="UTF-8">
    <!-- 设置字符编码为 UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置页面在移动设备上的显示效果 -->
    <title>使用 Fetch 请求 SSE 接口</title>
    <!-- 设置页面标题 -->
</head>

<body>
    <!-- 页面主体内容 -->
    <h1>实时时间显示</h1>
    <!-- 显示标题 -->
    <div id="message-container"></div>
    <!-- 用于显示服务器发送的消息的容器 -->

    <script>
        // 获取用于显示消息的容器元素
        const messageContainer = document.getElementById('message-container');

        /**
         * 使用 Fetch API 请求 SSE 接口并处理服务器发送的事件流
         * @async
         * @function fetchSSE
         * @returns {Promise<void>}
         */
        async function fetchSSE() {
            try {
                // 发起对 SSE 接口的请求
                const response = await fetch('http://localhost:3000/sse');
                // 检查响应状态是否正常
                if (!response.ok) {
                    // 若响应状态异常，抛出错误
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                // 获取响应体的读取器
                const reader = response.body.getReader();
                // 创建一个用于解码字节流的解码器
                const decoder = new TextDecoder();
                // 用于存储未处理的消息片段
                let buffer = '';

                // 循环读取响应体中的数据
                while (true) {
                    // 读取下一个数据块
                    const { done, value } = await reader.read();
                    // 如果读取完成，退出循环
                    if (done) {
                        break;
                    }
                    // 将读取的数据块解码并追加到缓冲区
                    buffer += decoder.decode(value, { stream: true });
                    // 按双换行符分割消息
                    const messages = buffer.split('\n\n');
                    // 取出最后一个未完整的消息片段
                    buffer = messages.pop();

                    // 遍历所有完整的消息
                    for (const message of messages) {
                        // 检查消息是否以 'data:' 开头
                        if (message.startsWith('data:')) {
                            // 提取消息中的数据部分
                            const data = message.slice(5).trim();
                            // 创建一个新的段落元素
                            const newMessage = document.createElement('p');
                            // 设置段落元素的文本内容为消息数据
                            newMessage.textContent = data;
                            // 将新的段落元素添加到消息容器中
                            messageContainer.appendChild(newMessage);
                        }
                    }
                }
            } catch (error) {
                // 捕获并输出请求过程中出现的错误
                console.error('请求出错:', error);
            }
        }

        // 调用 fetchSSE 函数发起请求
        fetchSSE();
    </script>
</body>

</html>